<template>
  <div class="experiment-wrapper white-bg">
    <div class="header-bar">
      <div class="header-title">
        <div class="title-logo">
          <div class="logo-text">AI云实验</div>
        </div>
        <div class="title-line"></div>
        <template v-if="tags">
          <div class="tags" v-for="(item, index) in tags" :key="index">
            {{ item }}
          </div>
        </template>
        <div class="title-text">{{ title }}</div>
      </div>
      <header-center
        @change-direction="handleChangeDirection"
        @change-size="handleChangeSize"
        @change-history="handleChangeHistory"
      />
      <div class="header-btns">
        <div class="btns">
          <div class="flex" @click="handleToggleMore">
            <img
              src="@/assets/icon-more-cur.png"
              v-if="showMore"
              class="icons"
            />
            <img src="@/assets/icon-more.png" v-else class="icons" />
            <span class="text" :class="{ blue: showMore }">更多操作</span>
          </div>

          <div class="show-more-box" v-if="showMore">
            <div class="more-btns" @click="handleTogglePoup1">
              <img
                src="@/assets/icon-zoom-cur.png"
                v-if="poup1.show"
                class="more-icons"
              />
              <img src="@/assets/icon-zoom.png" v-else class="more-icons" />

              <span class="text" :class="{ blue: poup1.show }"
                >放大观测区域</span
              >
            </div>

            <div class="more-btns" @click="handleTogglePoup2">
              <img
                src="@/assets/icon-adjust-cur.png"
                v-if="refresh"
                class="more-icons"
              />
              <img src="@/assets/icon-adjust.png" v-else class="more-icons" />
              <span class="text" :class="{ blue: refresh }">重新安装</span>
            </div>
            <div class="more-btns">
              <img src="@/assets/icon-save.png" class="more-icons" />
              <span class="text">保存草稿</span>
            </div>
            <div class="more-btns">
              <img src="@/assets/icon-tip.png" class="more-icons" />

              <span class="text">操作提示</span>
            </div>
          </div>
        </div>

        <div class="btn-line"></div>
        <div class="btns" @click="handleToggleRecord">
          <img
            src="@/assets/icon-record-cur.png"
            v-if="showRecord"
            class="icons"
          />
          <img src="@/assets/icon-record.png" v-else class="icons" />
          <span class="text" :class="{ blue: showRecord }">记录数据</span>
        </div>
        <div class="btn-line"></div>
        <div class="btns">
          <img src="@/assets/icon-time.png" class="icons" />

          <span class="text blue num">{{ realTime }}</span>
        </div>
        <div class="btn-line"></div>
        <div class="header-btn" @click="handleOver">实验完成</div>
      </div>
    </div>
    <div class="experiment-box">
      <div class="experiment-sider">
        <sider-step :datas="datas" />
      </div>
      <div class="experiment-main">
        <div class="main-box" ref="boxRef">
          <poup-move
            v-if="poup1.show"
            :x="poup1.x"
            :y="poup1.y"
            :width="poup1.width"
            :height="poup1.height"
            :title="poup1.title"
            :is-resizeable="poup1.isResizeable"
            @close="handlePoup1Colse"
          >
            <div class="img-box">
              <img :src="previewImg" v-if="previewImg" class="img" />
              <div class="no-img" v-else>暂无实验现象</div>
            </div>
          </poup-move>
          <poup-move
            v-if="poup2.show"
            :x="poup2.x"
            :y="poup2.y"
            :titleAlign="poup2.titleAlign"
            :width="poup2.width"
            :height="poup2.height"
            :title="poup2.title"
            :is-resizeable="poup2.isResizeable"
            @close="handlePoup2Colse"
          >
            <div class="turn-box">
              <turn v-model="turnValue" @modelValue="handleChangeValue"></turn>
            </div>
          </poup-move>
          <div class="iframe-box">
            <iframe
              :src="iframeUrlNew"
              ref="iframeRef"
              class="iframe"
              @load="sendChangeStatus"
            ></iframe>
          </div>
          <div class="report-tip" v-if="isShowOver" @click="handleToReport">
            <div class="tip-title">实验结束，开始写实验报告</div>
            <div class="tip-arrow"></div>
          </div>
        </div>
        <div class="sider-box" v-if="showRecord">
          <div class="sider-table-box">
            <div class="sider-tab">
              <div class="sider-tab-scroller" ref="tabScrollerRef">
                <div class="tab-title cur">实验数据记录表</div>
              </div>
            </div>
            <div class="sider-table">
              <t-table
                table-layout="auto"
                row-key="key"
                :bordered="true"
                :table-content-width="270"
                :data="tableData"
                :height="tableHeight"
                :columns="columns"
              ></t-table>
            </div>
          </div>
        </div>
        <div class="al-radius" @click="handleShowAiVisible"></div>
        <aI-drawer
          :visible="showAiVisible"
          @hideDrawer="handleHideAiVisible"
        ></aI-drawer>
        <start-tip
          :isShow="tipPoupShow"
          :datas="datas"
          @close-tip-poup="handleCloseTipPoup"
        ></start-tip>
        <!-- <div class="tip-box-poup" v-if="tipPoupShow">
          <div class="tip-box-wrapper">
            <div class="tip-tab">
              <div class="tab-hd">
                <div
                  class="hd-item"
                  v-for="(item, index) in tabList"
                  :key="index"
                  @click="handleChangeTab(index)"
                  :class="{ cur: index == curTabIndex }"
                >
                  {{ item.name }}
                </div>
              </div>
              <div class="tab-bd-box">
                <div
                  class="tab-bd"
                  style="padding-left: 25%"
                  v-if="curTabIndex == 0"
                >
                  <div class="content-text">
                    1.掌渥迈克尔逊干涉仪的干涉原理；
                  </div>
                  <div class="content-text">2.了解非定域干涉和时间相干性；</div>
                  <div class="content-text">
                    3.学会测量激光波长和介质的折射率
                  </div>
                  <div class="content-text">
                    4.学习一种测定光波长的方法，加强对等倾干涉的理解。
                  </div>
                </div>
                <div class="tab-bd" v-if="curTabIndex == 1">
                  <div class="content-text">
                    如图所示是迈克耳逊干涉仪的原理示意图。来自光源的一束光照到分束器
                    BS 上， 50% 的入射光被反射， 50%
                    的光透射，因此光束被均分为两束，一束反射向定镜 M1
                    ，一束透射后射向 M2 。两个反射镜都将光反射回分束器，来自 M1
                    的光透过分束器 BS 到达观察者的眼睛。来自 M2
                    的光通过补偿板，再通过分束器反射到观察者的眼睛 E 。
                  </div>
                  <div class="content-img">
                    <img :src="'./data/experiment-img.png'" />
                  </div>
                  <div class="content-text">
                    由于两束光来自同一个光源，它们的相位高度相关。将扩束器放到光源与分束器之间时，就可以观察到明暗相间的条纹，即干涉条纹。在上图中
                    M2’ 是 M2 的虚像。迈克耳逊干涉仪光程差可以看做是 M1 与 M2’
                    之间的气隙。补偿板与分束器的厚度及折射率相同。两束光在分束器与补偿板中所经过的光程是相等的，不同波长的光有相同的光程差。
                  </div>
                </div>

                <div class="tab-bd" v-if="curTabIndex == 2">
                  <div class="content-text">
                    该干涉仪在迈克尔逊模式下可以观察干涉现象（如等倾干涉，等厚干涉，白光干涉等），精细波长对比，确定零光程差，测量空气及薄片的折射率。可以在迈克尔逊模式的基础上，完成格林泰曼干涉。在法布里-珀罗模式下可以观察多光束干涉，测量光谱的精细结构（如钠双线波长差）。
                  </div>
                  <div class="content-img">
                    <img :src="'./data/LGS-7A 精密干涉仪.jpg'" />
                  </div>
                  <div class="content-text">
                    1881
                    年，迈克耳逊设计制造了一台双光束干涉仪。起初迈克耳逊设计这一干涉仪是为了测量以太（一种假设的光传播介质）是否存在，部分由于他的努力，以太被证明是不存在的。此后，迈克耳逊干涉仪被广泛地用于测量光的波长，或已知光源波长测量微小位移，以及研究光学介质。
                  </div>
                </div>
                <div
                  class="tab-bd"
                  style="padding-left: 10%"
                  v-if="curTabIndex == 3"
                >
                  <div class="content-text">
                    1.将迈克尔逊干涉仪放置在平台或支架上，并确保其稳定性。
                  </div>
                  <div class="content-text">
                    2.打开光源，使光线通过分束器进入干涉仪。
                  </div>
                  <div class="content-text">
                    3.调整分束器，使光线分为两束并沿不同的光路传播。
                  </div>
                  <div class="content-text">
                    4.将两个反射镜分别放置在两条光路上，并调整其位置，使两束光线在合束器处相遇。
                  </div>
                  <div class="content-text">
                    5.观察干涉图样，并根据实验需要调整反射镜的位置，以获得理想的干涉条纹。
                  </div>
                  <div class="content-text">
                    6.可以通过调节滤光片、透镜等辅助光学元件，来改变光的特性和实验条件，进一步观察和记录干涉现象。
                  </div>
                </div>
                <div
                  class="tab-bd"
                  style="padding-left: 10%"
                  v-if="curTabIndex == 4"
                >
                  <div class="content-text">
                    1.在实验过程中，要注意保持实验环境的稳定性，避免外界震动和干扰对实验结果的影响。
                  </div>
                  <div class="content-text">
                    2.保持干涉仪的光路清洁，并定期检查和清理反射镜和其他光学元件，以确保实验的准确性。
                  </div>
                  <div class="content-text">
                    3.利用光探测器等测量设备，准确记录实验数据，并进行分析和整理。
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tip-button" @click="handleCloseTipPoup">
            跳过提示，开始组装仪器 <img src="@/assets/icon-arrow-link.png" />
          </div>
          <div class="tip-bg"></div>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";
import headerCenter from "@/components/standard/header-center.vue";
import siderStep from "@/components/standard/sider-step.vue";
import poupMove from "@/components/poup/poup-move.vue";
import AIDrawer from "@/components/AIDrawer/index.vue";
import turn from "@/components/turn/index.vue";
import { useRouter } from "vue-router";
import { iframeUrl } from "@/utils/iframe";
import { Input } from "tdesign-vue-next";
import API from "@/api/user";
const query: any = computed(() => router.currentRoute.value.query);
const iframeUrlNew = computed(() => `${iframeUrl}&expid=${query.value.code}`);
// const iframeUrl = "http://localhost:5173/";
//const iframeUrl = "http://demos.dysense.cn/threejs/dist/index.html";

const router = useRouter();
const turnValue = ref(12);
const title: any = ref("");
const tags: any = ref([]);
const datas:any = ref();
const getData = async () => {
  const res: any = await API.ExperimentFetchModel({
    experiment_id: query.value.id,
  });
  datas.value = res;
  title.value = res.name;
};
const previewImg = ref();
const iframeRef: any = ref(null);
const handleMessage = (e:any) => {
  console.log("接收iframe的消息：", e.data);
  if (e.data.type === "sendUrl") {
    previewImg.value = e.data?.data?.url;
    poup1.value.show = true;
  }
  if (e.data.type == "togglePoupDevice") {
    let right = boxRef.value.getBoundingClientRect().width - 320;
    poup2.value.x = right;
    poup2.value.show = e.data.data;
  }
  if (e.data.type == "togglePoupImg") {
    poup1.value.show = e.data.data;
  }
};

//仪器3d交互
const handleChangeValue = (value: number) => {
  console.log("仪器3d交互", value);
  let datas = {
    type: "changeValue",
    data: {
      value: value,
    },
  };
  iframeRef.value.contentWindow.postMessage(datas, "*");
};
//实验3d交互方向控制
const handleChangeDirection = (value: number) => {
  console.log("实验3d交互方向控制", value);
  let datas = {
    type: "changeDirection",
    data: {
      value: value,
    },
  };
  iframeRef.value.contentWindow.postMessage(datas, "*");
};
//实验3d交互大小控制
const handleChangeSize = (value: number) => {
  console.log("实验3d交互大小控制", value);
  let datas = {
    type: "changeSize",
    data: {
      value: value,
    },
  };
  iframeRef.value.contentWindow.postMessage(datas, "*");
};
//实验3d交互历史记录控制
const handleChangeHistory = (value: number) => {
  console.log("实验3d交互历史记录控制", value);
  let datas = {
    type: "changeHistory",
    data: {
      value: value,
    },
  };
  iframeRef.value.contentWindow.postMessage(datas, "*");
};
const showMore = ref(false);
const handleToggleMore = () => {
  showMore.value = !showMore.value;
};

const tableData = ref([
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
]);
const poup1 = ref({
  title: "实验现象观测",
  x: 20,
  y: 20,
  width: 300,
  height: 344,
  show: false,
  isResizeable: false,
});
const handleTogglePoup1 = () => {
  poup1.value.show = !poup1.value.show;
  showMore.value = false;
  let datas = {
    type: "changePoupImg",
    data: {
      value: poup1.value.show,
    },
  };
  iframeRef.value.contentWindow.postMessage(datas, "*");
};

const boxRef: any = ref(null);
const poup2 = ref({
  title: "测微器",
  x: 20,
  y: 20,
  titleAlign: "center",
  width: 300,
  height: 371,
  show: true,
  isResizeable: false,
});
const refresh = ref(false);
const handleTogglePoup2 = () => {
  showMore.value = false;
  refresh.value = !refresh.value;
  if (!refresh.value) {
    return;
  }
  let datas = {
    type: "toggleAjustmentDevice",

    data: {
      value: true,
    },
  };
  iframeRef.value.contentWindow.postMessage(datas, "*");
};
const sendChangeStatus = () => {
  if (iframeRef.value?.contentWindow) {
    const datas = {
      type: "changeStatus",
      data: "open",
    };
    iframeRef.value.contentWindow.postMessage(datas, "*");
  }
};
onMounted(() => {
  window.addEventListener("message", handleMessage);
  getData();
});

const handlePoup1Colse = () => {
  poup1.value.show = false;
  let datas = {
    type: "changePoupImg",
    data: {
      value: false,
    },
  };
  iframeRef.value.contentWindow.postMessage(datas, "*");
};
const handlePoup2Colse = () => {
  poup2.value.show = false;
  let datas = {
    type: "changePoupDevice",
    data: {
      value: false,
    },
  };
  iframeRef.value.contentWindow.postMessage(datas, "*");
};
const columns = computed(() => [
  {
    colKey: "serial-number",
    className: "grey-cell",
    thClassName: "grey-cell",
    width: 50,
    align: "center",
  },
  {
    colKey: "t",
    width: 90,
    title: "移动环数",
    thClassName: "grey-cell",
    align: "center",
    edit: {
      component: Input,
      props: {
        clearable: true,
        autofocus: true,
        autoWidth: true,
      },
      showEditIcon: false,
      on: (editContext: any) => ({
        onBlur: () => {
          console.log("失去焦点", editContext);
        },
        onEnter: (ctx: {
          e: {
            preventDefault: () => void;
          };
        }) => {
          ctx?.e?.preventDefault();
          console.log("onEnter", ctx);
        },
      }),
      // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
      abortEditOnEvent: ["onEnter", "onBlur"],
      onEdited: (context: any) => {
        console.log(context);
        const newData = [...tableData.value];
        newData.splice(context.rowIndex, 1, context.newRowData);
        tableData.value = newData;
        console.log("Edit firstName:", context);
      },
    },
  },
  {
    colKey: "a",
    width: 90,
    title: "di（mm）",
    thClassName: "grey-cell",
    align: "center",
    edit: {
      component: Input,
      props: {
        clearable: true,
        autofocus: true,
        autoWidth: true,
      },
      showEditIcon: false,
      on: (editContext: any) => ({
        onBlur: () => {
          console.log("失去焦点", editContext);
        },
        onEnter: (ctx: {
          e: {
            preventDefault: () => void;
          };
        }) => {
          ctx?.e?.preventDefault();
          console.log("onEnter", ctx);
        },
      }),
      // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
      abortEditOnEvent: ["onEnter", "onBlur"],
      onEdited: (context: any) => {
        console.log(context);
        const newData = [...tableData.value];
        newData.splice(context.rowIndex, 1, context.newRowData);
        tableData.value = newData;
        console.log("Edit firstName:", context);
      },
    },
  },
  {
    colKey: "b",
    width: 90,
    title: "△d（mm）",
    thClassName: "grey-cell",
    align: "center",
    edit: {
      component: Input,
      props: {
        clearable: true,
        autofocus: true,
        autoWidth: true,
      },
      showEditIcon: false,
      on: (editContext: any) => ({
        onBlur: () => {
          console.log("失去焦点", editContext);
        },
        onEnter: (ctx: {
          e: {
            preventDefault: () => void;
          };
        }) => {
          ctx?.e?.preventDefault();
          console.log("onEnter", ctx);
        },
      }),
      // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
      abortEditOnEvent: ["onEnter", "onBlur"],
      onEdited: (context: any) => {
        console.log(context);
        const newData = [...tableData.value];
        newData.splice(context.rowIndex, 1, context.newRowData);
        tableData.value = newData;
        console.log("Edit firstName:", context);
      },
    },
  },
]);
const tableHeight = computed(() => {
  return window.innerHeight - 120;
});

const isShowOver = ref(false);
const handleOver = () => {
  isShowOver.value = true;
};

const showAiVisible = ref(false);
const handleShowAiVisible = () => {
  showAiVisible.value = true;
};
const handleHideAiVisible = () => {
  showAiVisible.value = false;
};

const handleToReport = () => {
  router.push("/report");
};
const showRecord = ref(false);
const handleToggleRecord = () => {
  showRecord.value = !showRecord.value;
  showMore.value = false;
};
const tabScrollerRef: any = ref(null);
// const handleScorllPrev = () => {
//   tabScrollerRef.value.scrollLeft -= 130;
// };
// const handleScrollNext = () => {
//   tabScrollerRef.value.scrollLeft += 130;
// };
const tipPoupShow = ref(true);
const curTabIndex = ref(0);
const tabList = ref([
  {
    name: "实验目的",
  },
  {
    name: "实验原理",
  },
  {
    name: "实验器材",
  },
  {
    name: "实验步骤",
  },
  {
    name: "注意事项",
  },
]);
const handleChangeTab = (index: number) => {
  curTabIndex.value = index;
};
const realTime: any = ref("0:00");
const timer = ref<number>();
const handleCloseTipPoup = () => {
  tipPoupShow.value = false;
  clearInterval(timer.value);

  const startTime = Date.now();
  timer.value = setInterval(() => {
    const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
    const minutes = Math.floor(elapsedTime / 60);
    const seconds = String(elapsedTime % 60).padStart(2, "0");
    realTime.value = `${minutes}:${seconds}`;
  }, 1000);
};
onUnmounted(() => {
  window.removeEventListener('message', handleMessage);
  clearInterval(realTime.value);
});
</script>
<style lang="less" scoped>
.experiment-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.al-radius {
  position: fixed;
  right: 0px;
  top: 50%;
  cursor: pointer;
  z-index: 999;
  transform: translateY(-50%);
  width: 111px;
  height: 120px;
  background: url(@/assets/ai-radius.png) no-repeat center;
  background-size: 100%;
}
.tip-box-poup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  .tip-bg {
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
  }
  .tip-button {
    width: 437px;
    z-index: 10002;
    cursor: pointer;
    height: 59px;
    background: #2776ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 24px;
    color: #ffffff;
    line-height: 30px;
    img {
      width: 30px;
      height: 30px;
      margin-left: 10px;
    }
  }
  .tip-box-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    .tip-tab {
      width: auto;
      .tab-hd {
        height: 60px;
        display: flex;
        align-items: center;
        .hd-item {
          width: 162px;
          height: 60px;
          margin-right: 6px;
          background: #edf3fe;
          border-radius: 20px 20px 0 0;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 16px;
          color: #262626;
          text-align: center;

          &.cur {
            background: #2776ff;
            border: 1px solid #e6ebf1;
            border-radius: 0;
            color: #fff;
          }
        }
      }
      .tab-bd-box {
        width: 1081px;
        height: 485px;
        overflow-y: auto;
        background: #ffffff;
        border: 1px solid #e6ebf1;
        border-radius: 0 20px 20px 20px;
        .tab-bd {
          padding: 20px;
          display: flex;
          box-sizing: border-box;
          min-height: 100%;
          flex-direction: column;
          justify-content: center;
          .content-text {
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 20px;
            color: #262626;
            letter-spacing: 0;
            line-height: 1.5;
            text-align: left;
          }
          .content-img {
            width: 50%;
            height: auto;
            margin: 20px auto;
            img {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
.header-bar {
  display: flex;
  background: #fff;
  padding: 0 16px;
  height: 50px;
  position: relative;
  z-index: 99;
  justify-content: space-between;
  border-bottom: 1px solid #cecece;
  .header-title {
    display: flex;
    align-items: center;
    .title-logo {
      display: flex;
      align-items: center;
      .login-text {
        font-family: FZZYJW--GB1-0;
        font-weight: 0;
        font-size: 14px;
        color: #262626;
      }
    }
    .title-line {
      width: 1px;
      height: 12px;
      background: #e8e9ed;
      margin: 0 12px;
    }
    .tags {
      padding: 0 8px;
      height: 24px;
      background: #eb61171a;
      border-radius: 4px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #eb6117;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
    }
    .title-text {
      line-height: 20px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 14px;
      color: #262930;
    }
  }
  .header-btns {
    display: flex;
    align-items: center;
    .btn-line {
      width: 1px;
      height: 12px;
      background: #e8e9ed;
      margin: 0 16px;
    }
    .btns {
      display: flex;
      align-items: center;
      height: 20px;
      cursor: pointer;
      position: relative;
      .icons {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
      .text {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #262930;
        &.num {
          font-family: DS-Digital;
          font-size: 16px;
        }
        &.blue {
          color: #2776ff;
        }
      }
      .flex {
        display: flex;
        align-items: center;
      }
      .show-more-box {
        position: absolute;
        left: 0;
        top: 45px;
        width: 156px;
        background: #ffffff;
        border: 1px solid #e6ebf1;
        box-shadow: 0 2px 20px 0 #0050cb14;
        border-radius: 8px;
        box-sizing: border-box;
        padding: 8px;

        .more-btns {
          display: flex;
          align-items: center;
          height: 40px;
        }
        .more-icons {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
      }
    }
    .header-btn {
      padding: 0 14px;
      height: 30px;
      cursor: pointer;
      background: #2776ff;
      border-radius: 15px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      line-height: 30px;
      color: #ffffff;
    }
  }
}
.experiment-box {
  height: calc(100% - 51px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafafa;
  position: relative;
  .experiment-sider {
    position: absolute;
    width: 64px;
    left: 16px;
    top: 50%;
    height: 336px;
    transform: translateY(-50%);
    background: #fff;
    z-index: 99;
    border-radius: 8px;
  }
  .experiment-main {
    flex: 1;
    height: 100%;
    display: flex;
    position: relative;
    justify-content: space-between;
    .main-box {
      flex: 1;
      height: 100%;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      .iframe-box {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        .iframe {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border: 0;
        }
      }
      .report-tip {
        position: absolute;
        bottom: 12px;
        left: 12px;
        right: 12px;
        height: 100px;
        background: #2776ff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .tip-title {
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 24px;
          color: #ffffff;
          line-height: 30px;
        }
        .tip-arrow {
          background: url(@/assets/icon-arrow-link.png) no-repeat center;
          width: 30px;
          height: 30px;
          margin-left: 8px;
        }
      }
    }
    .sider-box {
      width: 300px;
      height: 100%;
      background: #ffffff;
      .sider-table-box {
        height: 100%;
        width: 100%;
        .sider-tab {
          display: flex;
          align-items: flex-start;
          height: 40px;
          overflow: hidden;
          position: relative;
          background: #f2f3f5;
          .sider-prev {
            width: 40px;
            cursor: pointer;
            height: 40px;
            background: #ffffff url(@/assets/icon-prev.png) no-repeat center;
          }
          .sider-next {
            width: 40px;
            cursor: pointer;
            height: 40px;
            background: #ffffff url(@/assets/icon-next.png) no-repeat center;
          }
          .sider-tab-scroller {
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
            display: flex;
            height: 58px;
          }
          .tab-title {
            width: 130px;
            flex-shrink: 0;
            height: 40px;
            background: #f2f3f5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 14px;
            color: #4e5569;
            cursor: pointer;
            &.cur {
              background: #ffffff;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              font-size: 14px;
              color: #262626;
            }
          }
        }
        .sider-table {
          padding: 12px;
          height: calc(100% - 40px);
          box-sizing: border-box;
          overflow: hidden;

          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 12px;
          color: #262626;
          line-height: 16px;
          /deep/.grey-cell {
            background: #f2f3f5;
            color: #4e5569;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 12px;
            color: #262626;
            line-height: 16px;
            padding: 12px 8px;
          }
          /deep/.t-table td {
            padding: 8px 0 !important;
          }
        }
      }
    }
  }
}
.turn-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-box {
  width: 100%;
  height: 100%;
  .no-img {
    width: 100%;
    height: 100%;
    background: #f2f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
  }
  .img {
    width: 100%;
    height: 100%;
  }
}
</style>
